<template>
  <div>{{ deptName }}</div>
</template>

<!--新script-->
<script lang="ts" setup>
  import { ref } from 'vue';
  import { queryDeptRecordTreeList } from '@/api/system/dept';

  const props = defineProps({
    depId: { type: String, default: '' },
  });
  const dataList = ref<any[]>([]);
  const deptName = ref('');
  /**
   * func
   */
  /**
   * @description 获取部门的树形结构信息
   */
  const getTreeData = async () => {
    try {
      const { data } = await queryDeptRecordTreeList({});
      dataList.value = [];
      generateList(data);
      deptName.value =
        dataList.value.filter((el) => el.key === props.depId)[0]?.title || '';
      console.log(deptName.value, 'deptName.value');
    } catch (error) {
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
        duration: 20000,
      });
    }
  };
  /**
   * @description 构建treeData的所有 { key: title: id } 数组
   * @param data 树节点数据
   */
  const generateList = (data: any) => {
    // 创建dataList 递归调用
    data.forEach((item: any) => {
      const node = item;
      const key = node.id;
      dataList.value.push({ key, title: node.name, id: node.code });
      if (node.children) {
        generateList(node.children);
      }
    });
  };
  getTreeData();
</script>
